<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance 数据看板 2025</title>
    <style>
        :root {
            --primary-bg: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #212529;
            --accent-1: #4c8df6;
            --accent-2: #6c757d;
            --accent-3: #51cf66;
            --accent-4: #ff6b6b;
            --accent-5: #845ef7;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            background: var(--primary-bg);
            color: var(--text-color);
            line-height: 1.5;
        }

        header {
            padding: 1.5rem 1rem;
            text-align: center;
            background: var(--card-bg);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 1rem;
        }

        h1 {
            margin: 0 0 0.25rem;
            font-size: 1.6rem;
        }

        .summary {
            font-size: 0.9rem;
            color: var(--accent-2);
        }

        .container {
            width: 95%;
            max-width: 960px;
            margin: 0 auto 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .card {
            background: var(--card-bg);
            padding: 1rem 1.25rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .chart-title {
            margin: 0 0 0.75rem;
            font-size: 1.1rem;
        }

        /* Bar chart */
        .bar-row {
            display: flex;
            align-items: center;
            margin: 0.35rem 0;
            font-size: 0.9rem;
        }

        .bar-label {
            flex: 0 0 120px;
        }

        .bar-track {
            flex: 1;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            height: 20px;
        }

        .bar-fill {
            height: 100%;
            background: var(--accent-1);
        }

        /* Pie chart using conic-gradient */
        .pie {
            --percentage: 50;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: conic-gradient(var(--accent-3) 0 calc(var(--percentage)*1%), var(--accent-4) 0);
            margin: 0 auto 0.5rem;
        }

        .pie-legend {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            font-size: 0.85rem;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .legend-swatch {
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }

        @media (min-width: 600px) {
            .grid-2 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Agentic AI Performance 数据看板</h1>
        <div class="summary">共读取并处理记录数：<strong>5000</strong></div>
    </header>

    <main class="container">
        <!-- Multimodal Capability Pie Chart -->
        <section class="card">
            <h2 class="chart-title">多模态能力分布</h2>
            <div class="pie" style="--percentage:14.8;"></div>
            <div class="pie-legend">
                <div class="legend-item"><span class="legend-swatch" style="background: var(--accent-3);"></span>True&nbsp;14.8%</div>
                <div class="legend-item"><span class="legend-swatch" style="background: var(--accent-4);"></span>False&nbsp;85.2%</div>
            </div>
        </section>

        <div class="grid-2">
            <!-- Edge Compatibility Bar Chart -->
            <section class="card">
                <h2 class="chart-title">边缘设备兼容性</h2>
                <div class="bar-row">
                    <span class="bar-label">True (2693)</span>
                    <div class="bar-track"><div class="bar-fill" style="width:53.86%; background: var(--accent-1);"></div></div>
                </div>
                <div class="bar-row">
                    <span class="bar-label">False (2307)</span>
                    <div class="bar-track"><div class="bar-fill" style="width:46.14%; background: var(--accent-2);"></div></div>
                </div>
            </section>

            <!-- Deployment Environment Distribution -->
            <section class="card">
                <h2 class="chart-title">部署环境分布</h2>
                <div class="bar-row"><span class="bar-label">Mobile (882)</span><div class="bar-track"><div class="bar-fill" style="width:17.64%; background: var(--accent-5);"></div></div></div>
                <div class="bar-row"><span class="bar-label">Cloud (840)</span><div class="bar-track"><div class="bar-fill" style="width:16.8%; background: var(--accent-1);"></div></div></div>
                <div class="bar-row"><span class="bar-label">Edge (836)</span><div class="bar-track"><div class="bar-fill" style="width:16.72%; background: var(--accent-3);"></div></div></div>
                <div class="bar-row"><span class="bar-label">Server (835)</span><div class="bar-track"><div class="bar-fill" style="width:16.7%; background: var(--accent-2);"></div></div></div>
                <div class="bar-row"><span class="bar-label">Hybrid (818)</span><div class="bar-track"><div class="bar-fill" style="width:16.36%; background: var(--accent-4);"></div></div></div>
                <div class="bar-row"><span class="bar-label">Desktop (789)</span><div class="bar-track"><div class="bar-fill" style="width:15.78%; background: var(--accent-5);"></div></div></div>
            </section>
        </div>

        <!-- Bias Detection Score Gauge -->
        <section class="card">
            <h2 class="chart-title">偏见检测得分（平均值）</h2>
            <div class="bar-row">
                <span class="bar-label">平均&nbsp;0.774</span>
                <div class="bar-track" style="height: 24px;">
                    <div class="bar-fill" style="width:77.4%; background: var(--accent-3);"></div>
                </div>
            </div>
            <div style="font-size:0.8rem; margin-top:0.5rem; color:var(--accent-2);">得分范围：0.6002 - 0.95</div>
        </section>
    </main>
</body>
</html>
